---
title: Class Names
description: Learn how to use the Class Names plugin for Embla Carousel
order: 3
date: 2021-11-22
---

import { Tabs } from 'components/Tabs/Tabs'
import { TabsItem } from 'components/Tabs/TabsItem'
import { TABS_PACKAGE_MANAGER } from 'consts/tabs'
import { ClassNames } from 'components/Examples/Plugins/ClassNames'

# Class Names

<RepositoryLink to="https://github.com/davidjerleke/embla-carousel/tree/master/packages/embla-carousel-class-names">
  View plugin on GitHub
</RepositoryLink>

Class Names is a **class name toggle** utility plugin for Embla Carousel that enables you to automate the toggling of class names on your carousel.

---

## Example

<ClassNames />

## Installation

First you need to install the **npm package** and save it to your dependencies:

<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.CDN}>

    ```html
    <script src="https://unpkg.com/embla-carousel-class-names/embla-carousel-class-names.umd.js"></script>
    ```

  </TabsItem>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>

    ```shell
    npm install embla-carousel-class-names --save
    ```

  </TabsItem>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>

    ```shell
    yarn add embla-carousel-class-names
    ```

  </TabsItem>
</Tabs>

## Usage

Please read the [plugins](/api/plugins/#usage) page to learn **how to work with plugins**.

## Options

Below follows an exhaustive **list of all** `Class Names` **options** and their default values.

---

### snapped

Type: <BrandPrimaryText>`string | string[]`</BrandPrimaryText>  
Default: <BrandSecondaryText>`is-snapped`</BrandSecondaryText>

Choose a class name that will be applied to the **snapped slides**. It's also possible to pass an array of class names. Pass an empty string to opt-out.

---

### inView

Type: <BrandPrimaryText>`string | string[]`</BrandPrimaryText>  
Default: <BrandSecondaryText>`is-in-view`</BrandSecondaryText>

Choose a class name that will be applied to **slides in view**. It's also possible to pass an array of class names. Pass an empty string to opt-out.

<Admonition type="note">
  This feature will honor the [inViewThreshold](/api/options/#inviewthreshold)
  option.
</Admonition>

---

### draggable

Type: <BrandPrimaryText>`string | string[]`</BrandPrimaryText>  
Default: <BrandSecondaryText>`is-draggable`</BrandSecondaryText>

Choose a class name that will be applied to a **draggable carousel**. It's also possible to pass an array of class names. Pass an empty string to opt-out.

---

### dragging

Type: <BrandPrimaryText>`string | string[]`</BrandPrimaryText>  
Default: <BrandSecondaryText>`is-dragging`</BrandSecondaryText>

Choose a class name that will be applied to the container **when dragging**. It's also possible to pass an array of class names. Pass an empty string to opt-out.

---

### loop

Type: <BrandPrimaryText>`string | string[]`</BrandPrimaryText>  
Default: <BrandSecondaryText>`is-loop`</BrandSecondaryText>

Choose a class name that will be applied to a carousel with **loop activated**. It's also possible to pass an array of class names. Pass an empty string to opt-out.

---
